<template>
  <div class="booth-booking">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">展位预订</h1>
        <p class="page-subtitle">选择合适的展位，展示您的产品和服务</p>
      </div>
    </div>

    <div class="container">
      <!-- 展位类型 -->
      <section class="booth-section">
        <h2 class="section-title">展位类型</h2>
        <div class="booth-types">
          <div class="booth-type" v-for="type in boothTypes" :key="type.id">
            <div class="booth-image">
              <img :src="type.image" :alt="type.name">
            </div>
            <div class="booth-info">
              <h3>{{ type.name }}</h3>
              <p>{{ type.description }}</p>
              <div class="booth-specs">
                <div class="spec-item">
                  <span class="spec-label">面积：</span>
                  <span class="spec-value">{{ type.area }}</span>
                </div>
                <div class="spec-item">
                  <span class="spec-label">价格：</span>
                  <span class="spec-value">{{ type.price }}</span>
                </div>
                <div class="spec-item">
                  <span class="spec-label">配置：</span>
                  <span class="spec-value">{{ type.configuration }}</span>
                </div>
              </div>
              <el-button type="primary" @click="selectBooth(type)">选择此展位</el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 预订流程 -->
      <section class="process-section">
        <h2 class="section-title">预订流程</h2>
        <div class="process-steps">
          <div class="step-item" v-for="(step, index) in bookingProcess" :key="step.id">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3>{{ step.title }}</h3>
              <p>{{ step.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 预订表单 -->
      <section class="booking-section">
        <h2 class="section-title">展位预订</h2>
        <div class="booking-form">
          <form @submit.prevent="submitBooking" class="booth-form">
            <div class="form-row">
              <div class="form-group">
                <label for="company">公司名称 *</label>
                <input type="text" id="company" v-model="bookingForm.company" required>
              </div>
              <div class="form-group">
                <label for="contact">联系人 *</label>
                <input type="text" id="contact" v-model="bookingForm.contact" required>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label for="phone">联系电话 *</label>
                <input type="tel" id="phone" v-model="bookingForm.phone" required>
              </div>
              <div class="form-group">
                <label for="email">电子邮箱 *</label>
                <input type="email" id="email" v-model="bookingForm.email" required>
              </div>
            </div>
            <div class="form-group">
              <label for="boothType">展位类型 *</label>
              <select id="boothType" v-model="bookingForm.boothType" required>
                <option value="">请选择展位类型</option>
                <option v-for="type in boothTypes" :key="type.id" :value="type.id">
                  {{ type.name }} - {{ type.price }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label for="products">展品介绍</label>
              <textarea id="products" v-model="bookingForm.products" rows="4" placeholder="请描述您计划展示的产品和服务..."></textarea>
            </div>
            <div class="form-group">
              <label for="requirements">特殊需求</label>
              <textarea id="requirements" v-model="bookingForm.requirements" rows="3" placeholder="如有特殊需求请说明..."></textarea>
            </div>
            <button type="submit" class="submit-btn">提交预订</button>
          </form>
        </div>
      </section>

      <!-- 优惠政策 -->
      <section class="discount-section">
        <h2 class="section-title">优惠政策</h2>
        <div class="discount-content">
          <div class="discount-item" v-for="discount in discounts" :key="discount.id">
            <div class="discount-icon">
              <el-icon><component :is="discount.icon" /></el-icon>
            </div>
            <div class="discount-info">
              <h3>{{ discount.title }}</h3>
              <p>{{ discount.description }}</p>
              <div class="discount-details">
                <span class="discount-rate">{{ discount.rate }}</span>
                <span class="discount-condition">{{ discount.condition }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { 
  Star, 
  Service, 
  User, 
  Clock,
  Document,
  Check
} from '@element-plus/icons-vue'

export default {
  name: 'BoothBooking',
  components: {
    Star,
    Service,
    User,
    Clock,
    Document,
    Check
  },
  setup() {
    const boothTypes = ref([
      {
        id: 1,
        name: '标准展位',
        description: '适合中小型企业的标准展示空间',
        area: '9㎡ (3m×3m)',
        price: '¥15,000',
        configuration: '基础装修、桌椅、电源',
        image: 'https://images.pexels.com/photos/3861977/pexels-photo-3861977.jpeg?auto=compress&cs=tinysrgb&w=400&h=300&fit=crop&crop=center'
      },
      {
        id: 2,
        name: '豪华展位',
        description: '提供更优质的展示环境和配套设施',
        area: '18㎡ (3m×6m)',
        price: '¥28,000',
        configuration: '精装修、多媒体设备、休息区',
        image: 'https://images.pexels.com/photos/3861978/pexels-photo-3861978.jpeg?auto=compress&cs=tinysrgb&w=400&h=300&fit=crop&crop=center'
      },
      {
        id: 3,
        name: '特装展位',
        description: '可根据需求定制设计的专属展位',
        area: '36㎡ (6m×6m)',
        price: '¥50,000',
        configuration: '定制装修、全套设备、专属服务',
        image: 'https://images.pexels.com/photos/3861979/pexels-photo-3861979.jpeg?auto=compress&cs=tinysrgb&w=400&h=300&fit=crop&crop=center'
      }
    ])

    const bookingProcess = ref([
      {
        id: 1,
        title: '选择展位',
        description: '根据企业需求选择合适的展位类型和位置'
      },
      {
        id: 2,
        title: '提交申请',
        description: '填写展位预订申请表，提供企业基本信息'
      },
      {
        id: 3,
        title: '审核确认',
        description: '主办方审核申请材料，确认展位分配'
      },
      {
        id: 4,
        title: '签订合同',
        description: '签订参展合同，支付展位费用'
      },
      {
        id: 5,
        title: '展位搭建',
        description: '根据展位类型进行展位装修和布置'
      }
    ])

    const discounts = ref([
      {
        id: 1,
        title: '早鸟优惠',
        icon: 'Clock',
        description: '提前预订享受价格优惠',
        rate: '8折优惠',
        condition: '2025年3月31日前预订'
      },
      {
        id: 2,
        title: '老客户优惠',
        icon: 'Star',
        description: '往届参展商享受特别优惠',
        rate: '9折优惠',
        condition: '连续参展3届以上'
      },
      {
        id: 3,
        title: '团购优惠',
        icon: 'User',
        description: '多家企业联合参展享受优惠',
        rate: '85折优惠',
        condition: '3家以上企业联合预订'
      }
    ])

    const bookingForm = ref({
      company: '',
      contact: '',
      phone: '',
      email: '',
      boothType: '',
      products: '',
      requirements: ''
    })

    const selectBooth = (type) => {
      bookingForm.value.boothType = type.id
    }

    const submitBooking = () => {
      // 处理表单提交
      console.log('提交预订:', bookingForm.value)
      // 这里可以添加实际的提交逻辑
    }

    return {
      boothTypes,
      bookingProcess,
      discounts,
      bookingForm,
      selectBooth,
      submitBooking
    }
  }
}
</script>

<style scoped>
.booth-booking {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.booth-section,
.process-section,
.booking-section,
.discount-section {
  margin: 80px 0;
  padding: 60px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 展位类型样式 */
.booth-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.booth-type {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.booth-type:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.booth-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.booth-info {
  padding: 25px;
}

.booth-info h3 {
  font-size: 1.4rem;
  color: #ffd700;
  margin-bottom: 10px;
}

.booth-info p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 20px;
}

.booth-specs {
  margin-bottom: 20px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.spec-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.spec-value {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* 预订流程样式 */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.step-item {
  text-align: center;
  padding: 25px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.step-item:hover {
  transform: translateY(-5px);
}

.step-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #320063;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 20px;
}

.step-content h3 {
  font-size: 1.2rem;
  color: #ffd700;
  margin-bottom: 10px;
}

.step-content p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* 预订表单样式 */
.booking-form {
  max-width: 800px;
  margin: 0 auto;
}

.booth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1rem;
  color: white;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.submit-btn {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #320063;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffed4e, #ffd700);
}

/* 优惠政策样式 */
.discount-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.discount-item {
  display: flex;
  gap: 20px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.discount-item:hover {
  transform: translateY(-3px);
}

.discount-icon {
  font-size: 2.5rem;
  color: #ffd700;
  flex-shrink: 0;
}

.discount-info h3 {
  font-size: 1.3rem;
  color: #ffd700;
  margin-bottom: 10px;
}

.discount-info p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 15px;
}

.discount-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.discount-rate {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd700;
}

.discount-condition {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .booth-section,
  .process-section,
  .booking-section,
  .discount-section {
    padding: 40px 20px;
  }
  
  .booth-types {
    grid-template-columns: 1fr;
  }
  
  .process-steps {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .discount-content {
    grid-template-columns: 1fr;
  }

  .booth-form {
    padding: 20px;
  }

  .booth-type,
  .step-item,
  .discount-item {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  
  .booth-section,
  .process-section,
  .booking-section,
  .discount-section {
    padding: 30px 15px;
  }
}
</style> 